<template>
  <div id="app">
    <!-- 首页内容部分开始 -->
    <div class="content">
      <!-- 开头导航栏部分开始 -->
      <div class="navigation">
        <!-- 左边logo部分开始 -->
        <div class="logo">
          <img src="./assets/images/组 11.png" alt />
        </div>
        <!-- 左边logo部分结束 -->

        <!-- 右边导航部分开始 -->
        <div class="nav">
          <el-menu
            mode="horizontal"
            background-color="#fff"
            text-color="#000"
            active-text-color="#F59A2D"
          >
            <el-menu-item
              v-for="(item, index) in navData"
              :index="item.title"
              :key="index"
              @click="handle(item.url)"
            >{{ item.title }}</el-menu-item>
          </el-menu>
        </div>
        <!-- 右边导航部分结束 -->
      </div>
      <!-- 开头导航栏部分结束 -->

      <!-- 主体内容区域开始 -->
      <!-- 路由占位符开始 -->
      <router-view></router-view>
      <!-- 路由占位符结束 -->
      <!-- 主体内容区域结束 -->

      <!-- 页尾部分开始 -->
      <footer>
        <!-- 地图部分开始 -->
        <div class="map">
          <div id="container" tabindex="0"></div>
        </div>
        <!-- 地图部分结束 -->

        <!-- 联系框开始 -->
        <div class="contact">
          <!-- 线开始 -->
          <div class="Line"></div>
          <!-- 线结束 -->
          <!-- 标题开始 -->
          <div class="tit">躺着</div>
          <!-- 标题结束 -->
          <!-- 信息输入框包裹层开始 -->
          <div class="package">
            <div>
              <span v-for="(item, index) in textArr" :key="index">{{ item }}</span>
            </div>
            <div>
              <el-form ref="inputVal" :rules="rules" :model="inputVal" label-width="0px">
                <el-form-item label prop="name">
                  <el-input v-model="inputVal.name" placeholder="NAME"></el-input>
                </el-form-item>
                <el-form-item label prop="telephone">
                  <el-input v-model="inputVal.telephone" placeholder="Email"></el-input>
                </el-form-item>
              </el-form>
              <el-button type="primary" @click="diaSubmit('inputVal')">联系我们</el-button>
            </div>
          </div>
          <!-- 信息输入框包裹层结束 -->
        </div>
        <!-- 联系框结束 -->

        <!-- 页尾黑色底框开始 -->
        <div class="BottomFrame">
          <!-- 左半边开始 -->
          <div>
            <img src="./assets/images/下载.png" alt />
            <img src="./assets/images/95o6rrc5ws6mlw6wqzy0xgj7y.png" alt />
            <img src="./assets/images/400948654107744967.png" alt />
          </div>
          <!-- 左半边结束 -->

          <!-- 右半边开始 -->
          <div>All copyright © 2006-2020 in hebei province ze huai trade registration no.: ICP for 15016523-1</div>
          <!-- 右半边结束 -->
        </div>
        <!-- 页尾黑色底框结束 -->
      </footer>
      <!-- 页尾部分结束 -->
    </div>
    <!-- 首页内容部分结束 -->
  </div>
</template>

<script>
import axios from 'axios'
// 邮箱正则
var emailRegular = (rule, value, callback) => {
  const emailReg = /^[A-Za-z0-9\u4e00-\u9fa5]+@[a-zA-Z0-9_-]+(\.[a-zA-Z0-9_-]+)+$/;
  if (emailReg.test(value)) {
    return callback();
  }
  return callback(new Error("电子邮件填写不合法"));
};
// 联系电话自定义正则
var mobileRegular = (rule, value, callback) => {
  if (/^1(3|4|5|6|7|8|9)\d{9}$/.test(value)) {
    return callback();
  }
  return callback(new Error("联系电话填写不合法"));
};
// import imgArr_1 from "./assets/images/组 229.png";
// import imgArr_2 from "./assets/images/520057061138424936.png";
// import imgArr_3 from "./assets/images/16389946535785785.png";
export default {
  name: "app",
  data() {
    return {
      // array:[
      //   {url: imgArr_1},
      //   {url: imgArr_2},
      //   {url: imgArr_3}
      // ],
      activeIndex2: "",
      navData: [
        {
          title: "HOME",
          url: "HomePage",
        },
        {
          title: "COMPANY PRODUCT",
          url: "Company",
        },
        {
          title: "PRODUCT",
          url: "Prudoct",
        },
        {
          title: "ABOUT US",
          url: "AboutUs",
        },
        {
          title: "CONTACT US",
          url: "ContactUs",
        },
      ],
      // 联系我正则
      rules: {
        name: [{ required: true, message: "请输入你的名字", trigger: "blur" }],
        email: [
          { required: true, message: "请输入你的邮箱", trigger: "blur" },
          { validator: emailRegular, trigger: "blur" },
        ],
        telephone: [
          { required: true, message: "请输入你的电话", trigger: "blur" },
          { validator: mobileRegular, trigger: "blur" },
        ],
      },

      // 联系我数据开始
      inputVal: {
        name: "",
        email: "",
        telephone: "",
      },
      // 联系我数据结束
      // 联系我左边文字数据开始
      textArr: [
        "Tel: +0086-0311-66567569",
        "Whatsapp/skype/mob: +0086-15100149919",
        "Email: andrewzhang102@vip.163.com",
      ],
      // 联系我左边文字数据结束
    };
  },
  created() {
    this.MapApi();
    this.getApi()
  },
  methods: {
    // 地图开始
    MapApi() {
      var url =
        "https://webapi.amap.com/maps?v=1.4.15&key=b6b6d3cf794c7a57d83bfd35c2436484&callback=onLoad&plugin=AMap.ControlBar";
      var jsapi = document.createElement("script");
      jsapi.charset = "utf-8";
      jsapi.src = url;
      document.head.appendChild(jsapi);
      window.onLoad = function () {
        var map = new AMap.Map("container", {
          resizeEnable: true,
          rotateEnable: true,
          pitchEnable: true,
          zoom: 17,
          pitch: 80,
          rotation: -15,
          viewMode: "3D", //开启3D视图,默认为关闭
          buildingAnimation: true, //楼块出现是否带动画
          expandZoomRange: true,
          zooms: [3, 20],
          center: [116.333926, 39.997245],
        });

        map.addControl(
          new AMap.ControlBar({
            showZoomBar: false,
            showControlButton: true,
            position: {
              right: "10px",
              top: "10px",
            },
          })
        );
      };
    },
    // 地图结束

    // 联系框按钮开始
    // 提交
    diaSubmit(inputVal) {
      this.$refs[inputVal].validate((valid) => {
        if (valid) {
          this.$message({
            message: "亲，我会尽快联系你的",
            type: "success",
          });
        } else {
          this.$message.error("字都不会写，怎么搞得");
          return false;
        }
      });
    },

    // 重置
    resetForm(formName) {
      this.$refs[formName].resetFields();
    },
    // 联系框验证结束

    handle(url) {
      this.$router.push({
        name: url
        // query: this.array   //query:传递数组  params: 传递对象
      });
    },

    async getApi() {
      const data  = await axios({
        url: '/api/test',
        method: 'get',
      })
    }
  },
};
</script>

<style lang="less" scoped>
// 首页内容部分开始
.content {
  // 开头导航栏部分开始
  .navigation {
    width: 100%;
    height: 80px;
    display: flex;
    justify-content: center;
    align-items: center;
    // background-color: rosybrown;

    div {
      width: 60%;
      height: 100%;
      display: flex;
      justify-content: center;
      align-items: center;
    }

    // 左边logo部分开始
    .logo {
      width: 40%;

      img {
        padding: 5px 20px;
        display: block;
        box-shadow: 3px 3px 10px 3px gray;
      }
    }
    // 左边logo部分结束

    // 右边导航部分开始
    .nav {
      justify-content: flex-start;

      .el-menu-item {
        font-size: 1rem;
      }
    }
    // 右边导航部分结束
  }
  // 开头导航栏部分结束

  // 页尾部分开始
  footer {
    position: relative;

    // 地图部分开始
    .map {
      width: 100%;
      height: 500px;

      #container {
        width: 100%;
        height: 100%;
        overflow: hidden;
        margin: 0;
        border: none;
        font-family: "微软雅黑";
      }
    }
    // 地图部分结束

    // 联系框开始
    .contact {
      position: absolute;
      top: 50%;
      left: 50%;
      transform: translate(-50%, -50%);
      width: 250px;
      height: 250px;
      border-radius: 100%;
      background-color: #34383b;
      display: flex;
      flex-direction: column;
      justify-content: center;
      align-items: center;
      overflow: hidden;
      transition: all 0.5s;

      &:hover {
        width: 50%;
        height: 50%;
        border-radius: 20px;
        background-color: white;
        box-shadow: 5px 5px 10px 1px gray;
        opacity: 1;
      }

      &:hover div {
        opacity: 1;
      }

      & > div {
        transition: all 0.5s;
        opacity: 0;
      }

      // 线开始
      .Line {
        width: 10%;
        height: 2px;
        background-color: #000;
      }
      // 线结束

      // 标题开始
      .tit {
        font-size: 30px;
        margin-top: 30px;
      }
      // 标题结束

      // 信息输入框包裹层开始
      .package {
        width: 70%;
        height: 50%;
        margin-top: 30px;
        display: flex;
        justify-content: space-between;
        align-items: center;

        & > div {
          width: 50%;
          height: 100%;
        }

        & > div:nth-child(1) {
          // background-color: darkmagenta;
          display: flex;
          flex-direction: column;
          justify-content: space-around;
          align-items: flex-start;

          & > span {
            width: 100%;
            overflow: hidden;
            text-overflow: ellipsis;
            white-space: nowrap;
            color: #4c4c4c;
          }
        }
        & > div:nth-child(2) {
          // background-color: darkcyan;
          display: flex;
          flex-direction: column;
          justify-content: space-around;
          align-items: flex-end;
          .el-form {
            border: none !important;
            .el-form-item {
              border: none !important;

              .el-input {
                border: none !important;
                // border-bottom: 1px solid #000;
                input {
                  border: none !important;
                }
              }
            }
          }
          .el-button {
            background-color: white;
            color: #000;
            border: 1px solid #000;
            transition: all 0.5s;
          }
          .el-button:hover {
            background-color: #000;
            color: #fff;
            border: 1px solid #000;
          }
        }
      }
      // 信息输入框包裹层结束
    }
    // 联系框结束

    // 页尾黑色底框开始
    .BottomFrame {
      width: 100%;
      height: 500px;
      background-color: #34383b;
      div {
        width: 40%;
        height: 100px;
        position: absolute;
        bottom: 0;
        display: flex;
        justify-content: space-around;
        align-items: center;
      }

      & > div:nth-child(1) {
        left: 10%;
      }
      & > div:nth-child(2) {
        right: 10%;
        font-size: 0.5rem;
        color: gray;
      }
    }
    // 页尾黑色底框结束
  }
  // 页尾部分结束
}
// 首页内容部分结束
</style>
